<template>
  <!--地图挂载dom-->
  <div id="map"></div>
</template>

<script>
//引入依赖
import Map from 'ol/Map'
import { XYZ } from 'ol/source'
import View from 'ol/View'
import { Tile as TileLayer } from 'ol/layer'
import { transform } from 'ol/proj'

export default {
  name: 'TianDiMap',
  data() {
    return {}
  },
  mounted() {
    // var map = new Map({
    //     //地图容器div的id
    //     target: 'map',
    //     //地图容器中加载的图层
    //     layers: [
    //         //加载瓦片图层数据
    //         new TileLayer({
    //             title: "天地图矢量图层",
    //             source: new XYZ({
    //                 url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=9893433c99cfb657e6ec3a92fe4068e5",
    //                 wrapX: false
    //             })
    //         }),
    //         new TileLayer({
    //             title: "天地图矢量图层注记",
    //             source: new XYZ({
    //                 url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=9893433c99cfb657e6ec3a92fe4068e5",
    //                 wrapX: false
    //             })
    //         })
    //     ],
    //     //地图视图设置
    //     view: new View({
    //         //地图初始中心点
    //         center: [0, 0],
    //         //地图初始显示级别
    //         zoom: 3,
    //         //参考系设置
    //         projection: "EPSG:4326"
    //     })
    // });

    var center = transform([114.5, 38.0], 'EPSG:4326', 'EPSG:3857')
    var map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          title: '天地图路网',
          crossOrigin: 'anonymous',
          wrapX: false,
          source: new XYZ({
            url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=9893433c99cfb657e6ec3a92fe4068e5',
          }),
          /*isGroup: true,
                        name: '天地图路网'*/
        }),

        new TileLayer({
          title: '天地图文字标注',
          attributions: '天地图的属性描述',
          wrapX: false,
          source: new XYZ({
            url: 'https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=9893433c99cfb657e6ec3a92fe4068e5',
          }),
        }),
      ],
      view: new View({
        center: center,
        zoom: 11,
      }),
    })
  },
}
</script>

<style scoped></style>
